<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-blue" style="font-size: 14px;">
          <table>
            <tr>
              <td>
                <b>当前套餐</b>
              </td>
              <td>
                <span style="margin-left: 10px">套餐名称：<span style="color: #5cbbff">{{ uorder.goodName }}</span></span>
              </td>
              <td>
                <span style="margin-left: 10px">支持通道：</span>
              </td>
              <td>
                <span style="color: #5cbbff" v-show="uorder.payChannel == '无'">无</span>
                <dict-tag :options="dict.type.payment_channel" :value="uorder.payChannel" v-show="uorder.payChannel != '无'" />
              </td>
              <td>
                <span style="margin-left: 10px">费率：<span style="color: #96d3ff">{{ uorder.rate }}%</span></span>
              </td>
              <td>
                <span style="margin-left: 10px">应用数量：</span>
              </td>
              <td>
                <el-tag class="el-tag--plain">{{ uorder.appNum }}个</el-tag>
              </td>
              <td>
                <span style="margin-left: 10px">结算账户：</span>
              </td>
              <td>
                <span v-show="settlementShow == false" style="color: #ff1f1f" >未配置</span>
                <span v-show="settlementShow == false" style="cursor: pointer;margin-left: 16px;color: #ff8e6b"  @click="handleAdd">立即配置</span>

                <span v-show="settlementShow == true" style="color: #0cd205">已配置</span>
                <span v-show="settlementShow == true" style="cursor: pointer;margin-left: 16px;color: #ff8e6b"  @click="handleAdd">编辑配置</span>
              </td>
            </tr>
          </table>
        </blockquote>

        <hr />
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6" style="padding: 12px">
        <el-card class="box-card" style="background:#ff8181;color: white">
          <table>
            <tr>
              <td>
                <b style="font-size: 50px">￥</b>
              </td>
              <td>
                <b style="font-size: 16px">总计收款</b><br />
                <b style="font-size: 16px">{{ubasic.payAmount}}</b>
              </td>
            </tr>
          </table>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding: 12px">
        <el-card class="box-card" style="background:#ffbc5d;color: white">
          <table>
            <tr>
              <td>
                <b style="font-size: 50px">￥</b>
              </td>
              <td>
                <b style="font-size: 16px">总计退款</b><br />
                <b style="font-size: 16px">{{ubasic.refundAmount}}</b>
              </td>
            </tr>
          </table>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding: 12px">
        <el-card class="box-card" style="background:#04e5a1;color: white">
          <table>
            <tr>
              <td>
                <b style="font-size: 50px">￥</b>
              </td>
              <td>
                <b style="font-size: 16px">前天结算金额</b><br />
                <b style="font-size: 16px">{{ubasic.towDays}}</b>
              </td>
            </tr>
          </table>
        </el-card>
      </el-col>
      <el-col :span="6" style="padding: 12px">
        <el-card class="box-card" style="background:#64aafd;color: white">
          <table>
            <tr>
              <td>
                <b style="font-size: 50px">￥</b>
              </td>
              <td>
                <b style="font-size: 16px">昨日结算金额</b><br />
                <b style="font-size: 16px">{{ubasic.oneDays}}</b>
              </td>
            </tr>
          </table>
        </el-card>
      </el-col>
    </el-row>

    <div class="dashboard-editor-container">
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        <line-chart :chart-data="lineChartData" />
      </el-row>
    </div>


    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="微信收款码" prop="wxImg">
          <image-upload v-model="form.wxImg" :limit="1" />
        </el-form-item>
        <el-form-item label="支付宝收款码" prop="zfbImg">
          <image-upload v-model="form.zfbImg" :limit="1" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addData">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import LineChart from '@/views/dashboard/UBasicLineChart'
import {getUserOrder} from "@/api/system/order";
import { getUserSettlement, updataUserSettlement, getUserBasicData} from "@/api/system/settlement";

const lineChartData = {
  newVisitis: {
    payData: [],
    refundData: [],
    timeData:[]
  },
}

export default {
  name: 'Statistics',
  dicts: ['payment_channel'],
  components: {
    LineChart
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      //应用数据
      application: {},
      //统计数据
      ubasic: {
        oneDays:0.00,
        towDays:0.00,
        payAmount:0.00,
        refundAmount:0.00
      },
      //用户当前套餐
      uorder:{
        goodId:0,
        goodName:"无",
        payChannel:"无",
        rate:"0.00",
        appNum:"0"
      },
      //最新结算数据
      settlement:{},
      settlementShow:false,
      // 表单参数
      form: {},
      //查询参数
      queryParams: {
        type: null,
        appId: null,
        userId: null
      },
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {
      }
    }
  },
  created() {
    //获取用户当前订单
    getUserOrder().then(response => {
      if(response != null && response != ""){
        this.uorder.goodId = response.goodId;
        this.uorder.goodName = response.goodName;
        this.uorder.rate = response.rate;
        this.uorder.payChannel = response.payChannel;
        this.uorder.appNum = response.appNum;
      }
    });
    //获取用户结算数据
    getUserSettlement().then(response => {
      if(response != null && response != ""){
        this.settlement = response;
        if(response.wxImg != null || response.zfbImg != null){
          this.settlementShow = true;
          this.form.wxImg = response.wxImg;
          this.form.zfbImg = response.zfbImg;
        }
      }
    });
    getUserBasicData().then(response => {
      this.ubasic = response.data;
      //支付金额
      var arr = new Array();
      var arr2 = new Array();
      for (let i = 0; i < response.data.payArray.length; i++) {
        arr.push(response.data.payArray[i].amount);
        arr2.push(response.data.payArray[i].time);
      }
      lineChartData.newVisitis.payData = arr;
      lineChartData.newVisitis.timeData = arr2;
      //退款金额
      //折线图处理
      var arr3 = new Array();
      for (let i = 0; i < this.ubasic.refundArray.length; i++) {
        arr3.push(this.ubasic.refundArray[i].amount);
      }
      lineChartData.newVisitis.refundData = arr3;
    });
  },
  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type]
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 配置结算账户 */
    handleAdd() {
      this.open = true;
      this.title = "配置结算账户";
    },
    /** 配置结算数据 */
    addData(){
      updataUserSettlement(this.form).then(response => {
        this.$modal.msgSuccess("配置成功");
        this.open = false;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
